<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="com.solution.common.config.PublicConfig"%>
<%@page import="com.solution.admin.order.constants.OrderConstants"%>
<%@page import="com.solution.admin.home.constants.IndexConstants"%>
<%
	String basePath = PublicConfig.ROOT_PATH;
	String imgRootURL = PublicConfig.IMG_ROOT_URL;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图像识别</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta content="zh-cn" http-equiv="content-language" />
<meta content="" name="copyright" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/css/style.css?t=1" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/css/public.css" />
<!-- 大图查看插件 -->
<link rel="stylesheet" type="text/css" href="<%=basePath%>/statics/plugins/fancybox/css/fancybox.css" />
<!--[if lte IE 6]> 
<script type="text/javascript" src="js/PNG.js"></script> 
<script> 
PNG.fix('*'); 
</script> 
<![endif]-->
<script type="text/javascript">
	//系统域名 
	var rootPath = '<%=basePath%>';
	// 系统上传文件展示域名
	var imgRootURL = '<%=imgRootURL%>';
</script>
</head>
<body style="background:#fff">
	<c:set var="rootPath" value="<%=basePath %>"></c:set>
	<c:set var="imgRootURL" value="<%=imgRootURL %>"></c:set>
	<div id="result" style="padding-top: 20px; padding-left: 20px; padding-bottom: 20px; font-size: 15px;">
		结果
	</div>
	<div class="txt2" style="border:2px dashed red;">
		<div class="input_part1">
			<input id="imgDetection" class="inputfile" type="file" accept="image/png,image/jpeg" name="upload" onchange="ajaxFileUpload(this)"/>
			<input type="button" value="点击上传" onclick="publicUploadButton(this);"/>
		</div>
		<img id="xmTanImg" style="height: 300px;"/>
		<div id="xmTanDiv"></div>
	</div>
<script charset="utf-8" language="javascript" type="text/javascript" src="<%=basePath%>/statics/js/jquery.1.11.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/js/jquery.form.js"></script>
<script type="text/javascript" src="<%=basePath%>/statics/plugins/upload/ajaxfileupload.js"></script>
<script type="text/javascript">
//通过ajax提交图片
function ajaxFileUpload(obj) {
	var id = $(obj).attr("id");
	xmTanUploadImg(obj);
	$("#result").html("");
	$.ajaxFileUpload({
		url: rootPath + '/pc/demo/imageDetection',
		secureuri: false,
		fileElementId: id, // input标签id属性值
		dataType: 'json',
		success: function(data, status) {
			console.log(data);
			if(data.code == 1) {
				var str = "";
				$.each(data.detectionResult.results, function(key,value){
					str += "结果"+(key+1)+"：<br/>";
					str += "识别位置：top_"+value.location.top+"， " +
							"left_"+value.location.left+"， " +
							"height_"+value.location.height+"， " +
							"width_"+value.location.width+"<br/>";
					str += "名称："+value.name+"<br/>";
					str += "置信度："+value.score+"<br/><br/>";
				});
				$("#result").html(str);
			} else {
				layer.msg('上传失败',{time:1000});
				layer.close(index);
			}
		}
	});
}
//上传图片按钮
function publicUploadButton(obj,event) {
	$("#publicUpload").click();
}

//选择图片，马上预览
function xmTanUploadImg(obj) {
    var file = obj.files[0];
    
    console.log(obj);console.log(file);
    console.log("file.size = " + file.size);  //file.size 单位为byte

    var reader = new FileReader();

    //读取文件过程方法
    reader.onloadstart = function (e) {
        console.log("开始读取....");
    }
    reader.onprogress = function (e) {
        console.log("正在读取中....");
    }
    reader.onabort = function (e) {
        console.log("中断读取....");
    }
    reader.onerror = function (e) {
        console.log("读取异常....");
    }
    reader.onload = function (e) {
        console.log("成功读取....");

        var img = document.getElementById("xmTanImg");
        img.src = e.target.result;
        //或者 img.src = this.result;  //e.target == this
    }

    reader.readAsDataURL(file)
}
</script>
</body>
</html>